<template>
	<!-- 法人记录详情 -->
	<view class="back">
		<view class="content">
			<!-- 月份选择区域 -->
			<!-- 收入支出tab切换 -->
			<!--只有法人才会有收入支出导航栏 -->
			<view style="display: flex; justify-content: space-between">
				<!-- swiper-tab -->
				<!-- <view class="" style="height: 80rpx">
					<view v-if="user_type == 2" style="display: flex">
						<view :data-id="item.id" @click.stop.prevent="tabbarChange"
							v-for="(item, index) in currentTabList" :key="item.index">
							<text :class="'swiper-tab-list ' + (item.id == currentTab ? 'on' : '')"
								style="display: inline-block; margin-right: 50rpx">{{ item.name }}</text>

							<view :class="item.id == currentTab ? 'jiao' : ''" style="margin: 0 10rpx"></view>
						</view>
					</view>
				</view> -->
				<!-- display: flex;justify-content: flex-end;margin-top: -50rpx; -->
			<!-- 	<view style="text-align: right">
					<view style="display: flex; align-items: flex-end; justify-content: flex-end">
						<view @click="bindPickerChange"
							style="width: 170rpx; height: 64rpx; margin-right: 30rpx; margin-bottom: 20rpx">
							<view class="date-select">
								<view class="date-text" style="margin-right: 40rpx">{{detail.month}}月</view>
								<image style="width: 40%; height: 60rpx" src="../static/xiangxia.png"></image>
							</view>
						</view>
					</view>
				</view> -->
			</view>
			<!-- 图表区域 -->
			<view style='width: 100%;border: 1px solid #f3f3f3;'>
				<uni-ec-canvas class="uni-ec-canvas" id="line-chart" ref="canvas" canvas-id="lazy-load-chart" :ec="ec">
				</uni-ec-canvas>
			</view>
			<!-- 总支出或收入 -->
			<view style="text-align: center; padding: 50rpx">
				<text v-if="user_type == 2"
					style="font-size: 32rpx; font-weight: bold; color: #000000">{{ currentTab == 0 ? '总收入' : '总支出' }}</text>
				<text v-if="user_type == 1" style="font-size: 32rpx; font-weight: bold; color: #000000">总支出</text>
				<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13"
					style="font-size: 32rpx; font-weight: bold; color: #ff8a1e; margin-left: 10rpx">{{ Number(detail.revenue)+Number(detail.income)+Number(detail.retail)+Number(detail.other_income) || 0}} 人民币元</text>
				<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 || detail.type_id==9 || detail.type_id==10 || detail.type_id==11 || detail.type_id==12 || detail.type_id==14 || detail.type_id==15"
					style="font-size: 32rpx; font-weight: bold; color: #ff8a1e; margin-left: 10rpx">{{ detail.operating || 0}} 人民币元</text>
			</view>
			<!-- 详情最外层区域 -->
			<view class="item">
				<!-- 法人记录详情-->
				<view v-if="user_type == 2" class="flex-1 con">
					<!-- 法人记录详情 -->
					<view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image  v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 ||  detail.type_id==9 ||   detail.type_id==10 || detail.type_id==11 || detail.type_id==12 || detail.type_id==14 || detail.type_id==15" style="height: 55rpx; width: 55rpx" src="../static/yingyee.png"></image>
								<image v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13" style="height: 60rpx; width: 60rpx" src="../static/zongshu.png"></image>
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text  v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13" style="font-size: 28rpx; font-weight: bold; color: #000000">本月酒店总客房数</text>
									<text  v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7  ||  detail.type_id==8  ||  detail.type_id==9 ||  detail.type_id==10 || detail.type_id==11 || detail.type_id==12 || detail.type_id==14 || detail.type_id==15" style="font-size: 28rpx; font-weight: bold; color: #000000">本月营业收入</text>
									<!-- 酒店 -->
									<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3">{{ Number(detail.king)+Number(detail.double)+Number(detail.more)+Number(detail.family)+Number(detail.suite)+detail.other_bed[0]?detail.other_bed[0]:0 }} 间</text>
									<!-- 景区 -->
									<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6">{{ detail.operating || 0}} 人民币元</text>
									<!-- 旅行社 -->
									<text v-if="detail.type_id==7 || detail.type_id==8 ">{{ detail.operating || 0 }} 人民币元</text>
									<!-- 新业态 -->
									<text v-if="detail.type_id==9 ||  detail.type_id==10 || detail.type_id==11 || detail.type_id==12">{{ detail.operating || 0 }} 人民币元</text>
									<!-- 民宿 -->
									<text v-if="detail.type_id==13">{{ detail.peting_income|| 0 }} 间</text>
									<!-- 农家乐或者餐馆 -->
									<text v-if="detail.type_id==14 || detail.type_id==15">{{ detail.operating || 0 }} 人民币元</text>
								</view>
								<u-line-progress active-color="#2979ff" :percent="percentOne"></u-line-progress>
							</view>
						</view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 || detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 || detail.type_id==14 || detail.type_id==15"  style="height: 50rpx; width: 50rpx" src="../static/renshu.png"></image>
								<image v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13" style="height: 50rpx; width: 50rpx" src="../static/ruzhulv.png"></image>
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13" style="font-size: 28rpx; font-weight: bold; color: #000000">本月酒店入住率</text>
									<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 || detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 || detail.type_id==14 || detail.type_id==15" style="font-size: 28rpx; font-weight: bold; color: #000000">本月接待游客人数</text>
									<!-- 景区 -->
									<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6">{{ detail.tourists_received }} 人次</text>
									<!-- 酒店 -->
									<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3">{{ Number(detail.hotel_rate)}} %</text>
									<!-- 、旅行社 -->
									<text  v-if="detail.type_id==7 || detail.type_id==8 ">{{ Number(detail.organized_number)+Number(detail.domest_number)+Number(detail.inbound_number)+Number(detail.entry_number)+Number(detail.personnel_number)}} 人次</text>
									<!-- 新业态 -->
									<text  v-if="detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 ">{{detail.tour_received }} 人次</text>
									<!-- 民宿 -->
									<text  v-if="detail.type_id==13">{{ detail.hotel_rate }} %</text>
									<!-- 农家乐 或者餐馆-->
									<text  v-if="detail.type_id==14 || detail.type_id==15">{{ detail.received }} 人次</text>
								</view>
								<u-line-progress active-color="#2979ff" :percent="percentTwo"></u-line-progress>
							</view>
						</view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13" style="height: 55rpx; width: 55rpx" src="../static/yingyee.png"></image>
								<image  v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 || detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 || detail.type_id==14 || detail.type_id==15 " style="height: 60rpx; width: 60rpx" src="../static/zongshu.png"></image> 
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13" style="font-size: 28rpx; font-weight: bold; color: #000000">本月营业收入</text>
									<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 || detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 || detail.type_id==14 || detail.type_id==15" style="font-size: 28rpx; font-weight: bold; color: #000000">本月员工总数</text>
									<!-- 景区 -->
									<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6">{{ detail.salary }} 人</text>
									<!-- 酒店 -->
									<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3">{{Number(detail.revenue)+Number(detail.income)+Number(detail.retail)+Number(detail.other_income) || 0}}人民币元</text>
									<!-- 、旅行社 -->
									<text v-if="detail.type_id==7 || detail.type_id==8 ">{{ detail.total_num }} 人</text>
									<!-- 新业态 -->
									<text v-if="detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 ">{{ detail.total_number }} 人</text>
									<!-- 民宿 -->
									<text v-if="detail.type_id==13 ">{{ Number(detail.revenue)+Number(detail.income)+Number(detail.retail)+Number(detail.other_income)}} 人民币元</text>
									<!-- /农家乐 或者餐馆-->
									<text v-if="detail.type_id==14 || detail.type_id==15 ">{{ detail.totalnumber }} 人</text>
								</view>
								<u-line-progress active-color="#2979ff" :percent="percentThree"></u-line-progress>
							</view>
						</view>
						<view class="detail-back" style="display: flex; margin-bottom: 35rpx">
							<view class="detail-img" style="flex: 1; display: flex; align-items: center">
								<image v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13 " style="height: 55rpx; width: 55rpx" src="../static/danjia.png"></image>
								<image v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 || detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 || detail.type_id==14 || detail.type_id==15" style="height: 70rpx; width: 70rpx" src="../static/yuangong.png"></image>
							</view>
							<view class="detail-flex" style="width: 100%; flex: 9">
								<view
									style="display: flex; justify-content: space-between; margin-bottom: 20rpx; width: 100%">
									<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3 || detail.type_id==13 " style="font-size: 28rpx; font-weight: bold; color: #000000">本月酒店客单价</text>
								<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6 || detail.type_id==7 || detail.type_id==8 || detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 || detail.type_id==14 || detail.type_id==15" style="font-size: 28rpx; font-weight: bold; color: #000000">本月员工平均工资</text>
									<!-- 景区 -->
									<text v-if="detail.type_id==4 || detail.type_id==5 || detail.type_id==6">{{ detail.nance_cost || 0 }} 人民币元</text>
									<!-- 酒店 -->
									<text v-if="detail.type_id==1 || detail.type_id==2 || detail.type_id==3">{{ detail.guest || 0 }} 人民币元</text>
									<!-- 旅行社 -->
									<text v-if="detail.type_id==7 || detail.type_id==8 ">{{ detail.average_salary || 0 }} 人民币元</text>
									<!-- 新业态 -->
									<text v-if="detail.type_id==9 || detail.type_id==10 || detail.type_id==11 ||  detail.type_id==12 ">{{ detail.employees || 0 }} 人民币元</text>
									<!-- 民宿 -->
									<text v-if="detail.type_id==13">{{ detail.guest || 0 }} 人民币元</text>
									<!-- /农家乐 或者餐馆-->
									<text v-if="detail.type_id==14 || detail.type_id==15">{{ detail.employees || 0 }} 人民币元</text>
								</view>
								<!-- uveiw线形进度条 -->
								<u-line-progress active-color="#2979ff" :percent="percentFour"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
				<!-- 联络人什么都不显示 -->
			</view>
		</view>
	</view>
</template>

<script>
	// 此处将路径替换为你放置该组件的路径   
	import * as echarts from '../com/js_sdk/yanhao-echarts-for-wx/uni-ec-canvas/echarts.min.js'
	import uniEcCanvas from '../com/js_sdk/yanhao-echarts-for-wx/uni-ec-canvas/uni-ec-canvas.vue'
	import util from '../../../utils/util.js';
	export default {
		components: {
			uniEcCanvas
		},
		data() {
			return {
				ec: {//图表数据
					lazyLoad: true,
					option: {
						title: { //标题组件
							textStyle: {
								color: "#333333",
						 	fontSize: 12,
							}
						},
						tooltip: { //设置点击时提示框
							// axisPointer: {            // 坐标轴指示器，坐标轴触发有效
							// 	 type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'  
						 // }  
							trigger: 'item', // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis'
							position: 'top',
							showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
							hideDelay: 20, // 隐藏延迟，单位ms
							backgroundColor: '#717171', // 提示框背景颜色
							textStyle: {
								fontSize: '16px',
								color: '#FFF' // 设置文本颜色 默认#FFF
							},
							formatter: ' {b} : {c} ({d}%)' // formatter设置提示框显示内容// {a}指series.name  {b}指series.data的name// {c}指series.data的value  {d}%指这一部分占总数的百分比
						},
						// legend: {}, 
						legend: {//控制左上角是否显示
								orient: 'horizontal',//图例排列方向
								x: 'left',//上下左右方向
								margin:[0,0,100,0] //可设定图例[距上方距离，距右方距离，距下方距离，距左方距离]
							 },
						grid: {
							left: '6%',
							right: '6%',
							top: '6%',
							bottom: '6%',
							containLabel: true
						},
						series: [{
							name: '饼状图', //设置饼图名称
							type: 'pie', //设置图表类型
							// silent: fasle, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件
							// barWidth:'20',//设置柱宽度
							// radius: [50, 50],//设置饼图大小
							// radius: '70%', //设置饼图大小
							radius: ['30%', '50%'], //设置饼图大小/饼图的半径，数组的第一项是内半径，第二项是外半径。[ default: [0, '75%'] ]
							// center: ['50%', '50%'],//设置饼图位置
							roseType: 'area',
							data: []
						}]
					}
				},
				//自然人图表
				// ecLineCopy: {
				// 	onInit: initChartCopy
				// },
				// 进度条的状态 //酒店总客房数 
				percentOne: '',
				
				percentTwo: '',
				//营业额
				percentThree: '',
				//员工工资
				percentFour: '',
				//后勤维修
				// 当前设备的宽高
				winWidth: 0,
				winHeight: 0,
				// 收入  支出导航栏切换
				currentTab: 0,
				// 收入支出导航栏数据
				currentTabList: [{
						name: '收入',
						id: 0
					},
					{
						name: '支出',
						id: 1
					}
				],
				dataIndex: 0,
				dateArray: '',
				// 详情页ID
				id: '',//账单id
				// 自然人 法人 联络人类型
				user_type: 1,
				type_id:'',//具体业务类型
				col: '',
				//1  自然人  2  法人
				// 类型人传递参数赋值
				user_type_food: '',
				keyword: '',
				// 详情数据
				detail: {},
				// 获取指标信息传递的month月份
				month: '',
				// 禁止月份
				disabled: false,
				// 图标数据
				initData:[{
						value: 0,
						name: '11'
					},
					{
						value: 0,
						name: '22'
					},
					{
						value: 0,
						name: '33'
					},
					{
						value: 0,
						name: '44'
					}
				]
			}
		},
		onReady() {
			setTimeout(() => { //初始化图表
				this.$refs['canvas'].init()
			}, 1000) // 两秒之后延迟加载  
		},
		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			
			let parmas=JSON.parse(options.item)
			console.log('获取记账列表传过来的详情记录获取记账列表传过来的详情记录获取记账列表传过来的详情记录获取记账列表传过来的详情记录', parmas)
			var that = this;
			/**
			 * 获取当前设备的宽高
			 */
			//  uni.getSystemInfo({   暂时先不要删除， 后续可能会用到
			//      success: function (res) {
			// this.winWidth=res.windowWidth,
			// this.winHeight=res.windowHeight
			//      }
			//  });

			if (parmas) {
				this.user_type = parmas.user_type
            this.options=parmas
				
				if (parmas.user_type == 1) {
					this.user_type_food = '自然人'
				} else {
					this.user_type_food = '法人'
				}

			}
			// 获取详情数据
			this.getBillDetails(parmas);
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			 formatter: (val) => {
				 console.log('获取formatter',val)
			 },
			// 图表函数
			hrFun: function(textTitle, data) {
				console.log('data',data)
				var _self = this
				_self.ec.option.title = [{
					text: textTitle + '人民币元',
					x: 'center',
					top: '42%', //控制中间字体距离上下边距
					textStyle: {
						color: '#666',
						fontSize: 13,
						fontWeight: 'bold',
					}
				}, {
					text: '总计',
					x: 'center',
					top: '50%', //控制中间字体距离上下边距
					textStyle: {
						fontSize: 15,
						color: '#666',
					},
				}],
				_self.ec.option.toolbox = {
					show: true//工具兰是否显示
				} 
				_self.ec.option.series[0].data = data
			},
			// 法人图表
			initChart(canvas, width, height, canvasDpr) {
				console.log(canvas, width, height, canvasDpr)
				chart = echarts.init(canvas, null, {
					width: width,
					height: height,
					devicePixelRatio: canvasDpr
				})
				canvas.setChart(chart)
				chart.setOption(this.option)
				return chart
			},
			// 收入 支出tab切换逻辑
			tabbarChange: function(e) {
				var that = this;
				if (this.currentTab === e.currentTarget.dataset.id) {
					return false;
				} else {
					this.currentTab = e.currentTarget.dataset.id
				}
			},

			// 月份选择
			bindPickerChange: function(e) {
				uni.showToast({
					title: '不支持更换月份',
					icon: 'none',
					duration: 1000
				});
			},

			// 获取详情数据
			getBillDetails(options) {
				var _self = this;
				uni.showToast({
					title: '加载中...',
					icon: 'loading',
					duration: 1000
				});
				if (options) {
					var id = options.id
					var user_type = options.user_type == 1 ? '自然人' : '法人'
					var month = options.month
					var  type_id=options.type_id
					//自然人    //法人
					var keyword = options.col == 1 ? 'totel' : 'turnover'
					console.log('传递的详情参数', id, user_type, month, keyword)
					uni.request({
						method: 'POST',
						url: 'https://jizhang.xqyu.cn/index.php/api/index/get_bill_details',
						dataType: 'json',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							id: id,
							user_type: user_type,
							keyword: keyword,
							month: month,
							type_id:type_id
						},
						success: function(res) {
							// 数据加载完成，隐藏弹窗
							uni.hideLoading();
							if (res.data.code == 1) {
								// 时间格式化
								// let time = util.timestampToTime(res.data.time);
								// res.data.data.createtime = time
								// 月份格式化渲染
								// let month = parseInt(res.data.data.month)
								// res.data.data.month = month
								_self.detail= res.data.data
								console.log('获取最终详情',_self.detail)
								_self.detail.other_bed=_self.detail.other_bed?(_self.detail.other_bed).split('-'):0
								// 处理带横线的字段格式
								let other_bed=""
								  console.log('处理other-bed格式问题处理other-bed格式问题处理other-bed格式问题',_self.detail.other_bed)
								if(_self.detail.type_id==1 || _self.detail.type_id==2 || _self.detail.type_id==3){
									// 图表里的中间总收入
									let textTitle = Number(res.data.data.revenue)+Number(res.data.data.income)+Number(res.data.data.retail)+Number(res.data.data.other_income)
									let totalKefang=Number(res.data.data.king)+Number(res.data.data.double)+Number(res.data.data.more)+Number(res.data.data.family)+Number(res.data.data.suite)+ Number(res.data.data.other_bed[0]?res.data.data.other_bed[0]:0) //本月酒店总客房数
									console.log('获取总客房数赋值',totalKefang)
									// 格式化百分比||  || || ) >100  
									 //本月酒店总客房数
									if( totalKefang >100 ){_self.percentOne = 100}else{_self.percentOne=totalKefang}
									//本月酒店入住率
									if(Number(res.data.data.hotel_rate)>100){
										  _self.percentTwo = 100
									}else{
											_self.percentTwo=res.data.data.hotel_rate
									}
									// 本月营业收入
									if(Number(res.data.data.revenue)+Number(res.data.data.income)+Number(res.data.data.retail)+Number(res.data.data.other_income)>100){
										_self.percentThree=100
									}else{
										 _self.percentThree = Number(res.data.data.revenue)+Number(res.data.data.income)+Number(res.data.data.retail)+Number(res.data.data.other_income)
									}
									// 本月酒店客单价
									if(Number(res.data.data.guest)>100){
										_self.percentFour = 100
									}else{
										_self.percentFour = res.data.data.guest 
									}
									_self.initData[0].value=totalKefang//本月酒店总客房数
									_self.initData[0].name="本月酒店总客房数"//本月酒店总客房数
									_self.initData[1].value=res.data.data.hotel_rate
									_self.initData[1].name="本月酒店入住率"
									_self.initData[2].value=Number(res.data.data.revenue)+Number(res.data.data.income)+Number(res.data.data.retail)+Number(res.data.data.other_income)
									_self.initData[2].name="本月营业收入"
									_self.initData[3].value=res.data.data.guest
									_self.initData[3].name="本月酒店客单价"
									_self.hrFun(textTitle, _self.initData)
								}else if(_self.detail.type_id==4 || _self.detail.type_id==5 || _self.detail.type_id==6){
									console.log('获取景区详情获取景区详情获取景区详情获取景区详情获取景区详情', _self.detail.type_id)
									
									let textTitle = res.data.data.operating
									// 本月营业收入
									if( res.data.data.operating >100 ){
										_self.percentOne = 100
									}else{
										_self.percentOne= res.data.data.operating
									}
									// 本月接待游客人数
									if( Number(res.data.data.tourists_received) >100){
										_self.percentTwo = 100
									}else{
										_self.percentTwo=Number(res.data.data.tourists_received)
									}
									// 本月员工总数
									if(Number(res.data.data.total_number)>100){
										_self.percentThree=100
									}else{
										_self.percentThree = res.data.data.total_number
									}
									if(Number(res.data.data.salary)>100){
										_self.percentFour =100
									}else{
										_self.percentFour = res.data.data.salary //后勤维护费用
									}
									_self.initData[0].value=res.data.data.operating
									_self.initData[0].name="本月营业收入"
									_self.initData[1].value=Number(res.data.data.tourists_received)
									_self.initData[1].name="本月接待游客人数"
									_self.initData[2].value=res.data.data.total_number
									_self.initData[2].name="本月员工总数"
									_self.initData[3].value=res.data.data.salary
									_self.initData[3].name="本月员工平均工资"
									_self.hrFun(textTitle, _self.initData)
								}else if(_self.detail.type_id==7 || _self.detail.type_id==8 ){
									let textTitle = res.data.data.operating
									let totalJiedai= Number(res.data.data.organized_number)+Number(res.data.data.domest_number)+Number(res.data.data.inbound_number)+Number(res.data.data.entry_number)+Number(res.data.data.personnel_number)
									// 本月接待游客人数
									if( totalJiedai>100){
										_self.percentOne = 100
									}else{
										_self.percentOne=totalJiedai
									}
									// 本月营业收入
									if(Number(res.data.data.operating)>100){
										_self.percentTwo=100
									}else{
										_self.percentTwo=res.data.data.operating
									}
									// 本月员工总数
									if(Number(res.data.data.total_num)>100){
										_self.percentThree=100
									}else{
										_self.percentThree=res.data.data.total_num
									}
									//本月员工平均工资
									if(Number(res.data.data.average_salary)>100){
										_self.percentFour =100
									}else{
										_self.percentFour = res.data.data.average_salary //后勤维护费用
									}
									_self.initData[0].value=res.data.data.operating
									_self.initData[0].name="本月营业收入"
									_self.initData[1].value=Number(res.data.data.organized_number)+Number(res.data.data.domest_number)+Number(res.data.data.inbound_number)+Number(res.data.data.entry_number)+Number(res.data.data.personnel_number)
									_self.initData[1].name="本月接待游客人数"
									_self.initData[2].value=res.data.data.total_num
									_self.initData[2].name="本月员工总数"
									_self.initData[3].value=res.data.data.average_salary
									_self.initData[3].name="本月员工平均工资"
									_self.hrFun(textTitle, _self.initData)
								}else if(_self.detail.type_id==9 || _self.detail.type_id==10 || _self.detail.type_id==11 || _self.detail.type_id==12){
									let textTitle = res.data.data.operating
									// 本月营业收入
									if(res.data.data.operating>100){
										_self.percentOne=100
									}else{
										_self.percentOne=res.data.data.operating
									}
									// 本月接待游客人数
									if(Number(res.data.data.tour_received)>100 ){
										_self.percentTwo = 100
									}else{
										_self.percentTwo=res.data.data.tour_received 
									}
									// 本月员工总数
									if(Number(res.data.data.total_number)>100){
										_self.percentThree =100
									}else{
										_self.percentThree = res.data.data.total_number//员工工资
									}
									// 本月员工平均工资
									if(Number(res.data.data.employees)>100){
										_self.percentFour = 100
									}else{
										_self.percentFour = res.data.data.employees //后勤维护费用
									}
									_self.initData[0].value=res.data.data.operating
									_self.initData[0].name="本月营业收入"
									_self.initData[1].value=Number(res.data.data.tour_received)
									_self.initData[1].name="本月接待游客人数"
									_self.initData[2].value=res.data.data.total_number
									_self.initData[2].name="本月员工总数"
									_self.initData[3].value=res.data.data.employees
									_self.initData[3].name="本月员工平均工资"
									_self.hrFun(textTitle, _self.initData)
								}else if(_self.detail.type_id==13){
									// 图标中间的总数
									let textTitle = Number(res.data.data.revenue)+Number(res.data.data.income)+Number(res.data.data.retail)+Number(res.data.data.other_income)
									// 总客房数
									if(res.data.data.peting_income>100){
										_self.percentOne = 100
									}else{
										_self.percentOne = res.data.data.peting_income
									}
									// 本月酒店入住率
									if(Number(res.data.data.hotel_rate)>100 ){
										_self.percentTwo = 100//营业额
									}else{
										_self.percentTwo =res.data.data.hotel_rate
									}
									// 本月营业收入
									let totalMoney=Number(res.data.data.revenue)+Number(res.data.data.income)+Number(res.data.data.retail)+Number(res.data.data.other_income)
									if(totalMoney>100){
										_self.percentThree = 100
									}else{
										_self.percentThree = totalMoney
									}
									// 本月民宿客单价
									if(Number(res.data.data.guest)>100){
										_self.percentFour = 100
									}else{
										_self.percentFour = res.data.data.guest 
									}
									_self.initData[0].value=res.data.data.peting_income//本月酒店总客房数
									_self.initData[0].name="本月民宿总客房数"//本月酒店总客房数
									_self.initData[1].value=res.data.data.hotel_rate
									_self.initData[1].name="本月民宿入住率"
									_self.initData[2].value=Number(res.data.data.revenue)+Number(res.data.data.income)+Number(res.data.data.retail)+Number(res.data.data.other_income)
									_self.initData[2].name="本月营业收入"
									_self.initData[3].value=res.data.data.guest
									_self.initData[3].name="本月民宿客单价"
									_self.hrFun(textTitle, _self.initData)
								}else  if(_self.detail.type_id==14 ||_self.detail.type_id==15 ){
									let textTitle = res.data.data.operating
									// 本月营业收入
									let water= Number(res.data.data.water_con)+ Number(res.data.data.electricity)
									if(Number(res.data.data.operating) >100){
										_self.percentOne = 100
									}else{
										_self.percentOne = Number(res.data.data.operating)
									}
									// 本月接待游客人数
									if(Number(res.data.data.received)>100 ){
										_self.percentTwo = 100//营业额
									}else{
										_self.percentTwo = Number(res.data.data.received)
									}
									// 本月员工总数
									if(Number(res.data.data.totalnumber)>100){
										_self.percentThree=100
									}else{
										_self.percentThree = res.data.data.totalnumber
									}
									// 本月员工平均工资
									if(Number(res.data.data.employees)>100){
										_self.percentFour = 100
									}else{
										_self.percentFour = res.data.data.employees 
									}
									_self.initData[0].value=res.data.data.operating
									_self.initData[0].name="本月营业收入"
									_self.initData[1].value=res.data.data.totalnumber
									_self.initData[1].name="本月员工总数"
									_self.initData[2].value=res.data.data.employees
									_self.initData[2].name="本月员工平均工资"
									_self.initData[3].value=res.data.data.received
									_self.initData[3].name="本月接待游客人数"
									_self.hrFun(textTitle, _self.initData)
								}
							}
						}
					});
				}

			}
		},
	}
</script>

<style scoped lang="scss">
	// 设置图表的宽高
	.uni-ec-canvas {
		width: 680rpx;
		height: 600rpx;
		display: block;
	}
	
	.chart-wrap {
		width: 100%;
		height: 500rpx;
		display: block;
		margin-top: 30rpx;
	}

	.content {
		padding: 30rpx;
	}

	.year {
		text-align: right;
		display: block;
	}

	.month {
		text-align: right;
	}

	.chart {
		margin-top: 50rpx;
	}

	.chart image {
		width: 100% !important;
		height: 360rpx !important;
	}

	.zhichu {
		font-weight: bold;
		margin-top: 50rpx;
	}

	.zhichu text {
		color: #ff8a1e;
	}

	.item {
		margin-top: 40rpx;
	}

	.week text {
		margin-right: 30rpx;
	}

	.con text {
		display: block;
	}

	.warp {
		margin-top: 20rpx;
		padding-bottom: 30rpx;
	}

	.title {
		font-weight: bold;
		margin-bottom: 10rpx;
	}

	.chart image {
		width: 40% !important;
		height: 60rpx !important;
	}

	.chart {
		margin-top: 50rpx;
	}

	.chart text {
		font-weight: bold;
	}

	.date-select {
		display: flex;
		align-items: center;
		color: #666;
		padding: 0 15rpx;
		font-size: 24rpx;
		line-height: 46rpx;
		background-color: #eee;
		border-radius: 4rpx;
	}

	.date-text {
		width: 90rpx;
		overflow: hidden;
	}

	/* .date-select image{width: 24rpx;height: 24rpx;} */
	.chart-wrap {
		height: 360rpx;
	}

	.chart-wrap ec-canvas {
		width: 100%;
		height: 100%;
	}

	.on {
		color: #333333 !important;
	}

	.swiper-tab-list {
		font-size: 30rpx;
		font-weight: bold;
		color: #666666;
		line-height: 35px;
	}

	.jiao {
		width: 0;
		height: 0;
		border-right: 10rpx solid transparent;
		border-left: 10px solid transparent;
		border-bottom: 10px solid yellow;
	}

	.swiper-tab {
		display: flex;
	}

	.detail-back {
		display: flex;
	}
</style>
